<template>
  <div id="detail_shopinfo">
    <div class="shoplogo">
      <img :src="shopLogo" alt="" />
      <span class="name">{{ name }}旗舰店</span>
    </div>
    <div class="shopdesc">
      <div class="left1">
        <div class="item">
          <div>{{ cSells / 10000 }}万</div>
          <p>总销量</p>
        </div>
        <div class="item">
          <div>{{ cGoods }}</div>
          <p>全部宝贝</p>
        </div>
      </div>
      <div class="line"></div>
      <div class="right1">
        <div v-for="(item, index) in score" :key="index" class="iitem">
          {{ item.name }}
          <span
            class="sroce"
            :style="{ color: item.isBetter == true ? 'red' : 'green' }"
            >{{ item.score }}</span
          >
          <span
            class="isbetter"
            :style="{
              backgroundColor: item.isBetter == true ? 'red' : 'green',
            }"
            >{{ item.isBetter == true ? "高" : "低" }}</span
          >
        </div>
      </div>
    </div>
    <div class="url">
      <a class="shopurl" href="https://m.mogu.com/">进店逛逛</a>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "detail_shopinfo", // 组件参数 接收来自父组件的数据
  components: {}, // 局部注册的组件
  props: {
    shopLogo: {
      type: String,
      default() {
        return "";
      },
    },
    name: {
      type: String,
      default() {
        return "";
      },
    },
    cSells: {
      type: Number,
      default() {
        return 0;
      },
    },
    cGoods: {
      type: Number,
      default() {
        return 0;
      },
    },
    score: {
      type: Array,
      default() {
        return [];
      },
    },
    shopUrl: {
      type: String,
      default() {
        return "";
      },
    },
  }, // 组件状态值
  data() {
    return {
      color: null,
    };
  },
};
</script>
<style scoped>
#detail_shopinfo {
  background-color: #fff;
}
.shoplogo {
  line-height: 100px;
  height: 100px;
  padding-left: 10px;
}
.shoplogo img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #666;
}
.name {
  margin-left: 5px;
  font-size: 15px;
}
.iitem {
  display: flex;
}
.left1 {
  width: 50%;
  display: flex;
  justify-content: space-evenly;
}
.shopdesc {
  display: flex;
  position: relative;
  height: 60px;
}
.item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shopurl {
  display: block;
  width: 160px;
  height: 26px;
  line-height: 26px;
  background-color: #eee;
  border-radius: 10px;
  color: #000;
  margin-left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.sroce {
  display: block;
  width: 40px;
  padding-left: 5px;
}
.line {
  width: 1px;
  height: 30px;
  background-color: grey;
  position: absolute;
  left: 50%;
  top: 5px;
}
.right1 {
  position: absolute;
  right: 36px;
  top: -10px;
  display: flex;
  flex-direction: column;
}
.isbetter {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  line-height: 18px;
  margin-top: 2px;
}
.url {
  border-bottom: 4px solid #eee;
  padding-bottom: 20px;
}
</style>